<template>
	<div id="#tabbar">
        <router-view></router-view>
		<tabbar>
            <tabbar-item  :selected="sele[0]" link="/">
                <img slot="icon" :src="botbar[0]">
                <span slot="label">拼抢ing</span>
            </tabbar-item>
            <tabbar-item :selected="sele[1]" link="/jifenshangcheng">
                <img slot="icon" :src="botbar[1]">
                <span slot="label">积分商城</span>
            </tabbar-item>
            <tabbar-item :selected="sele[2]" link="/xiangqing">
                <img slot="icon" :src="botbar[2]">
                <span slot="label">个人中心</span>
            </tabbar-item>
        </tabbar>
	</div>
</template>
<script type="text/javascript" scoped>
	import { Tabbar, TabbarItem, Group, Cell } from 'vux'

	export default {
		components: {
			Tabbar,
			TabbarItem,
			Group,
			Cell
		},
    	data () {
    		return {
    			botbar:[
    				'static/pinqianging.png',
    				'static/jifenshangcheng.png',
    				'static/gerenzhongxin.png',
    			],
    			rebotbar:[	
    				'static/pinqianging_select.png',
    				'static/jifenshangcheng_select.png',
    				'static/gerenzhongxin_select.png',
    			],
    			sele:[
    				true,
    				false,
    				false,
    			]
    		}
    	},
    	created(){
    		this.rep()
    	},
    	methods:{
			rep(){
				this.botbar=[
    				'static/pinqianging.png',
    				'static/jifenshangcheng.png',
    				'static/gerenzhongxin.png',
    			]
				if(this.$route.path=='/'){
    				this.botbar[0]=this.rebotbar[0];
    				this.sele[0] = true;
    				this.sele[1] = false;
    				this.sele[2] = false;
	    		}
	    		if(this.$route.path=='/jifenshangcheng'){
	    			this.botbar[1]=this.rebotbar[1];
	    			this.sele[0] = false;
    				this.sele[1] = true;
    				this.sele[2] = false;
	    		}
	    		if(this.$route.path=='/xiangqing'){
	    			this.botbar[2]=this.rebotbar[2];
	    			this.sele[0] = false;
    				this.sele[1] = false;
    				this.sele[2] = true;
	    		}
                
			}
    	},
    	watch:{
    		'$route':"rep"
    	}
	}
</script>
<style type="text/css" scoped>
	.weui-tabbar {position: fixed !important;height:50px;background-color: #fff !important;}
    .weui-tabbar__icon {width:24px !important; height:24px !important;}
    .weui-tabbar__label {color: #333 !important;}
    .weui-tabbar__item.weui-bar__item_on .weui-tabbar__label {color: #333 !important;}
</style>
